<template>
  <div>
    <h4>HelloWorld</h4>

    <div ref="divRef"></div>

    <input @change="onChange" />
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, computed, type Ref, onMounted} from 'vue'

const divRef = ref<HTMLDivElement>()

onMounted(() => {
  if (divRef.value) {
    divRef.value.innerText
  }


  // (divRef.value as HTMLDivElement).innerText
})

function  onChange(event: Event) {
  (event.target as HTMLInputElement).value
}

// 1. 定义变量时先标注类型
const year: Ref<number> = ref(1000)
// 2. 自动推导类型
const month = ref(1000)
// 3. 如果类型是联合或更复杂的情况，可以通过 ref<类型参数>()
const str = ref<string | number>(10)

const book = reactive({ title: 'Vue 3 指引' })

interface Book {
  title: string
  year?: number
}

const book2: Book = reactive({ title: '1111' })

const dddd = computed<number>(() => {
  return 1000
})


// 1. 基于类型的声明
interface IProps {
  name?: string
  age?: number
}
withDefaults(defineProps<IProps>(), {
  name: '张三',
  age: 18
})

const emit = defineEmits<{
  (e: 'change', id: number):void
}>()

const fn1 = () => {
  emit('change', 10)
}

export type Expose = {
  a: string;
  b: number;
}

defineExpose({
  a: '1',
  b: 100
})
</script>
